<template>
	<view class="my-page">
		<view class="avatar-nickname" v-if="avatar">
			<view class="nickname">
				<view class="message">
					<view class="headers" :style="{backgroundImage:`url(${user?.headimg})`}"></view>
					<view class="yongHuMing">
						<view v-if="user?.id">{{user.customer_name}}</view>
						<view v-else @click="toPath('/pages/wuLian/login')">登录</view>
					</view>
				</view>
				<view class="iconImg">
				</view>
			</view>
		</view>

		<view class="sectionBox">
			<!-- 我的订单部分 -->
			<view class="section">
				<view class="section-title">
					<view class="">
						我的订单
					</view>
					<view class="">
					</view>
				</view>
				<view class="grid-container">
					<view class="grid-item" @click="toPath('/pages/mine/callMsg?tab=all&status=')">
						<view class="grid-img" style="background-image: url('/static/wddd.png');">
						</view>
						<view class="grid-text">我的订单</view>
					</view>
					<view class="grid-item" @click="toPath('/pages/mine/callMsg?tab=ybj&status=0')">
						<view class="grid-img" style="background-image: url('/static/ybj.png');">
						</view>
						<view class="grid-text">已报价</view>
					</view>
					<view class="grid-item" @click="toPath('/pages/mine/callMsg?tab=ycj&status=1')">
						<view class="grid-img" style="background-image: url('/static/ycj.png');">
						</view>
						<view class="grid-text">已成交</view>
					</view>
					<view class="grid-item" @click="toPath('/pages/mine/callMsg?tab=wcj&status=2')">
						<view class="grid-img" style="background-image: url('/static/wcj.png');">
						</view>
						<view class="grid-text">未成交</view>
					</view>
				</view>
			</view>

			<!-- 客户服务部分 -->
			<view class="section">
				<view class="section-title">
					<view class="">
						客户服务
					</view>
				</view>
				<view class="grid-container">
					<view class="grid-item">
						<view class="grid-img" style="background-image: url('/static/qywx.png');">

						</view>
						<view class="grid-text">企业微信</view>
					</view>
					<view class="grid-item">
						<view class="grid-img" style="background-image: url('/static/kfdh.png');">

						</view>
						<view class="grid-text">客服电话</view>
					</view>
				</view>
			</view>

			<!-- 客户反馈部分 -->
			<view class="section">
				<view class="section-title">客户反馈</view>
				<view class="grid-container">
					<view class="grid-item">
						<view class="grid-img" style="background-image: url('/static/wtfk.png');">
						</view>
						<view class="grid-text">我的反馈</view>
					</view>
					<view class="grid-item">
						<view class="grid-img" style="background-image: url('/static/fkcx.png');">
						</view>
						<view class="grid-text">反馈查询</view>
					</view>
				</view>
			</view>
			<!-- <view class="section">
				<view class="section-title">我的配置</view>
				<view class="grid-container">
					<view class="grid-item">
						<view class="grid-img" style="background-image: url('/static/ldzj.png');">

						</view>
						<view class="grid-text">漏电自检</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 定义图片地址，这里先使用空字符串，实际使用中替换为真实图片地址
	import {
		getUser
	} from '@/utils/token';
	import {getContact} from "@/api/user.js"
	const user = getUser()
	const loginFlag = ref(false)
	if (user?.id) {
		loginFlag.value = true
	}

	function toPath(path) {
		if (loginFlag.value) {
			uni.navigateTo({
				url: path
			})
		} else {
			uni.showToast({
				title: "请先登录"
			})
		}

	}

</script>

<style scoped>
	.headers {
		width: 120rpx;
		height: 120rpx;
		background-color: aqua;
		border-radius: 50%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: center;
	}

	.my-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f5f5f5;
		overflow-y: auto;
		position: relative;
	}

	.avatar-nickname {
		width: 824rpx;
		height: 200px;
		display: flex;
		align-items: center;
		margin-bottom: 50rpx;
		background-color: #E60012;
		color: white;
		position: relative;
	}

	.nickname {
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	}

	.message {
		width: auto;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.yongHuMing {
		margin-left: 20rpx;
	}



	.sectionBox {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 280rpx;
		overflow-y: auto;
	}

	.section {
		width: 90%;
		margin-bottom: 20rpx;
		background-color: white;
		padding: 20rpx;
		margin: 20rpx auto;
		border: 1px solid #ccc;
		box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
	}

	.section-title {
		/* font-size: 36rpx; */
		/* font-weight: bold; */
		width: 95%;
		margin: 0rpx auto;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		padding-bottom: 10rpx;
		color: #000;
	}

	.grid-container {
		display: grid;
		margin-top: 50rpx;
		margin-left: 20rpx;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}

	.grid-item {
		width: 120rpx;
		margin-bottom: 20rpx;
		/* text-align: center;
		margin: 0 30rpx; */
	}

	.grid-img {
		width: 100%;
		height: 80rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
	}

	.grid-text {
		width: 120rpx;
		text-align: center;
		font-size: 28rpx;
		/* color: #ccc; */
	}
</style>